import './Form.css'

import React from 'react'
import { useState } from 'react'

const Form = props => {
    
    const [info, setInfo] = useState({
        name: '',
        age: '',
        sex: ''
    });
    const addPersonHandle = () => {
       const newInfo = {
            name: info.name,
            age: info.age,
            sex: info.sex
        }
        props.addPerson(newInfo)
        setInfo({
            name: '',
            age: '',
            sex: ''
        })
    }
    const nameInputChanged = (e) => {
        let val = e.target.value
        setInfo({...info, name: val})
    }
    const ageInputChanged = (e) => {
        let val = e.target.value
        setInfo({...info, age: val})
    }
    const sexInputChanged = (e) => {
        let val = e.target.value
        setInfo({...info, sex: val})
    }
    
  return (
    <div className='form'>
        <div><label>姓名</label><input value={info.name} onChange = {nameInputChanged}></input></div>
        <div><label>年龄</label><input value={info.age} onChange = {ageInputChanged}></input></div>
        <div><label>性别</label><input value={info.sex} onChange = {sexInputChanged}></input></div>
        <button onClick={addPersonHandle}>添加</button>
    </div>

  )
}


export default Form